<template>
    <div class="timestamp-container">
        <h2 class="timestamp-title">时间戳转换</h2>
        <div class="timestamp-content">
            <div class="timestamp-unix-in">
                <span class="timestamp-label">时间戳</span>
                <input type="number" class="timestamp-unix" v-model="unix">
            </div>
            <div class="timestamp-bts">
                <button class="timestamp-tansform-date" @click="transformToDate">时间戳转日期</button>
                <button class="timestamp-tansform-unix" @click="transformToUnix">日期转时间戳</button>
            </div>
            <div class="timestamp-unix-out">
                <span class="timestamp-label">日期</span>
                <input type="datetime-local" class="timestamp-date" step="1" v-model="date">
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "TimeStampUtil",
    data() {
        return {
            unix: 0,
            date: null,
        }
    },
    methods: {
        padZero(num) {
            return num < 10 ? '0' + num : num;
        },
        formatDateTime(date) {
            let year = date.getFullYear();
            let month = this.padZero(date.getMonth() + 1);
            let day = this.padZero(date.getDate());
            let hours = this.padZero(date.getHours());
            let minutes = this.padZero(date.getMinutes());
            let seconds = this.padZero(date.getSeconds());

            return year + '-' + month + '-' + day + 'T' + hours + ':' + minutes + ':' + seconds;
        },
        transformToDate() {
            this.date = this.formatDateTime(new Date(this.unix));

        },
        transformToUnix() {
            let d=new Date(this.date);
            this.unix=d.getTime();
        },
    },
    mounted() {
        this.date = this.formatDateTime(new Date());
    },
}
</script>

<style scoped>
.timestamp-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    background-color: #444040;
    justify-content: center;
    align-items: center;
}

.timestamp-title {
    position: absolute;
    color: aliceblue;
    top: 0;
    margin: 0;
}

.timestamp-content {
    position: relative;
    width: 90%;
    height: 90%;
    background-color: #a5a2a2;
    box-shadow: 0 0.25rem 1.125rem rgba(76, 92, 70, 0.1);
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.timestamp-unix-in {
    position: absolute;
    top: 30%;
    width: 15%;
    height: 10%;
}

.timestamp-unix {
    width: 270px;
    font-size: 1.2rem;
}

.timestamp-unix-out {
    position: absolute;
    top: 60%;
    width: 15%;
    height: 10%;
}

.timestamp-date {
    width: 270px;
    font-size: 1.2rem;
}

.timestamp-label {
    font-size: 1.2rem;
}

.timestamp-bts>button {
    margin: 20px;
    cursor: pointer;
}
</style>